<template>
    <li class="flex justify-between gap-x-6 py-5 cursor-pointer">
        <div class="flex min-w-0 gap-x-4">
            <el-avatar :size="48" :src="src" />
            <div class="min-w-0 flex-auto">
                <p class="text-lg font-semibold leading-6 text-gray-900 hover:text-[#4F46E5] transition-all">{{title}}</p>
                <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{username}}</p>
            </div>
        </div>
        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
            <p class="text-sm leading-6 text-gray-900" v-if="isRecommend">
                <el-tag type="danger">推荐</el-tag>
            </p>
            <p class="mt-1 text-xs leading-5 text-gray-500">更新于 <time> {{ getDateDiff(timestemp) }} </time> 之前</p>
        </div>
    </li>
</template>

<script setup lang="ts">

import {getDateDiff} from '../../../utils/commonFunc.ts';


type Props = {
    title: string
    content?: string
    src: string
    username: string
    timestemp: number
    isRecommend: boolean // 是否推荐
}

defineProps<Props>();
    
</script>
<style scoped></style>